import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入首页组件
// 以下这种导入组件配置路由的方式 项目一运行 所有的组件都会被加载,项目过大后,会
// 导致首屏加载过慢  解决方案 - 配置路由懒加载(使用函数的方式去导入路由)
// import Login from '@/views/Login'
// import Reg from '@/views/Reg'
// import Layout from '@/views/Layout'
// import Home from '@/views/Home'
// import ArtCategory from '@/views/ArtCategory'
// import ArtList from '@/views/ArtList'
// import UserInfo from '@/views/UserInfo'
// import ChangeAvatar from '@/views/ChangeAvatar'
// import ResetPwd from '@/views/ResetPwd'

// ------------------------------
// 解决方案 - 配置路由懒加载(使用函数的方式去导入路由)
const Login = () => import('@/views/Login')
const Reg = () => import('@/views/Reg')
const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/Home')
const ArtCategory = () => import('@/views/ArtCategory')
const ArtList = () => import('@/views/ArtList')
const UserInfo = () => import('@/views/UserInfo')
const ChangeAvatar = () => import('@/views/ChangeAvatar')
const ResetPwd = () => import('@/views/ResetPwd')
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/reg', component: Reg },
    {
      path: '/',
      component: Layout,
      children: [
        { path: '/', component: Home },
        { path: '/artcategory', component: ArtCategory },
        { path: '/artlist', component: ArtList },
        { path: '/userinfo', component: UserInfo },
        { path: '/changeavatar', component: ChangeAvatar },
        { path: '/resetpwd', component: ResetPwd }
      ]
    }
  ]
})

// 路由前置导航守卫 核心点是放行(路由地址的切换)
// to 到哪里去
// from 从哪里来 /login --> /  to和from 是一个路由信息对象
// next() 是一个放行函数可以直接调用 类似编程式导航 this.$router.push()
// 需求: 用户只要访问有权限的页面(首页/文章/个人中心...) 如果没有登录 拦截
// 白名单
const whiteList = ['/login', '/reg']
router.beforeEach((to, from, next) => {
  // 如果访问的是没有权限的页面 直接放行
  // if (to.path === '/login' || to.path === '/reg') {
  // if (whiteList.indexOf(to.path) !== -1) {
  if (whiteList.includes(to.path)) {
    next()
  } else {
    //  访问的是有权限的页面
    // 1. 先判断是否有token
    if (localStorage.getItem('bigevent-token')) {
      // 如果有token直接放行
      next()
    } else {
      // 没有token 强制跳转到登录页
      next('/login')
    }
  }
})

export default router
